<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="container">
        <home-head />
        <!-- 轮播 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#ff734c">
          <van-swipe-item v-for="banner in banners" :key="banner.id">
            <img :src="banner.picUrl" alt="" />
          </van-swipe-item>
        </van-swipe>
        <!-- /轮播 -->
        <!-- 宫格导航 -->
        <van-grid clickable column-num="3">
          <van-grid-item
            v-for="cate in cates"
            :key="cate.id"
            :icon="cate.icon"
            :text="cate.name"
            :to="{
              path: '/itemList',
              query: {
                cateId: cate.id
              }
            }"
          />
        </van-grid>
        <!-- /宫格导航 -->
        <!-- 推荐商品 -->
        <van-list
          v-model="loading"
          :finished="finished"
          :offset="50"
          finished-text="我也是有底线的"
          @load="onLoad"
        >
          <items @clickItem="enterDetail" @clickAddIcon="addCart" :items="items" />
        </van-list>
        <!-- /推荐商品 -->
      </div>
    </van-pull-refresh>
    <my-tabbar />
  </div>
</template>

<script>
import { fetchCates, fetchHomeBanner, fetchItems, addCart } from '_api'
import MyTabbar from '../../components/MyTabbar.vue'
import HomeHead from './components/HomeHead.vue'
import Items from './components/Items.vue'
import { getToken } from '_utils'
import { Toast } from 'vant'
export default {
  components: { MyTabbar, HomeHead, Items },
  name: 'Home',
  data () {
    return {
      banners: [],
      cates: [],
      items: [], // 推荐商品数据
      isLoading: false, // 是否处理下拉加载状态
      page: 1, // 当前页
      pageSize: 5, // 一页多少条
      loading: false, // 代表是否上拉触底 （上拉触底时会自动变成true）, 变成true时自动触发 load事件
      finished: false // 是否到达最后一页 变成true 不会再触发 load 事件
    }
  },
  created () {
    this.fetchCates()
    this.fetchBanners()
  },
  methods: {
    addCart ({ id }) {
      // 加入购物车
      addCart({
        goodsId: id,
        number: 1,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          Toast.success('加入购物车成功')
          this.$store.commit('cart/set_cart_info', {
            items: res.data.data.items,
            number: res.data.data.number
          })
        }
      })
    },
    enterDetail (id) {
      // 跳转到详情页
      this.$router.push(`/detail/${id}`)
    },
    onLoad () {
      // 上拉触底
      /*
      在 内容 高度 距离可视区高度小于 给定的offset时触发
      */
      // 初始化时自动调用一次 初始数据没有过来 网页内容高度没有撑开，内容和可视区距离是 负数
      this.fetchItems()
      // 将page+1请求下一页的数据
      this.page++
    },
    onRefresh () {
      // 下拉刷新回调 处理 下拉时调用 isLoading会自动变成true
      // 重新请求列表数据
      // 重新请求第一页数据
      this.page = 1
      // 将原来数据清空 （原来是合并）
      this.items = []
      // 将 到达最后一页 状态关闭（已经从第一页重新请求了）
      this.finished = false
      this.fetchItems()
      this.page++
    },
    fetchItems () {
      // 请求首页推荐商品数据
      fetchItems({
        categoryId: '72399',
        page: this.page,
        pageSize: this.pageSize
      }).then((res) => {
        this.isLoading = false
        // 在这里将 上拉加载状态变成false (下一页数据已经过来的)
        this.loading = false
        if (res.data.code === 0) {
          // 应该讲数据合并 （上拉加载时 前面页的数据 还在）
          this.items = [...this.items, ...res.data.data.result]
        }
        if (res.data.code === 700) {
          // 已经到达最后一页 没有数据了
          this.finished = true
        }
      })
    },
    fetchBanners () {
      // 请求首页轮播数据
      fetchHomeBanner().then((res) => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    },
    fetchCates () {
      // 请求首页宫格导航分类数据
      fetchCates().then((res) => {
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 50px;
}
.my-swipe {
  width: 10rem;
  height: 5rem;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
